<template>
  <div class="dy-discuss">
    <ul>
      <li
        class="discuss-user clearfix"
        v-for="(el, index) in userData"
        v-bind:key="index"
      >
        <div class="user-pic">
          <img :src="`${el.author.member.avatar_url}`" alt="" />
        </div>
        <div class="user-content clearfix">
          <p>{{ el.author.member.name }}</p>
          <div class="cont-data clearfix">
            <span class="data">{{ dayTimer[index] }}</span>
            <div class="data-right">
              <span class="num">{{ el.is_like }}</span>
              <i class="iconfont icon-dianzan"></i>
            </div>
          </div>
          <div class="cont-txt">
            <p>{{ el.content }}</p>
          </div>
        </div>
      </li>
      <p class="notxt">没有更多啦···</p>
    </ul>
  </div>
</template>

<script>
export default {
  name: "dynamicPage01",
  data() {
    return {
      dayTimer: [], //评论时间
      userData: {}, //用户评论
    };
  },
  methods: {
    // 把时间戳转换为正常时间
    toData(k) {
      let toTime = new Date(k);
      let y = toTime.getFullYear();
      let M = toTime.getMonth() + 1;
      let d = toTime.getDate();
      let h = toTime.getHours();
      let m = toTime.getMinutes();
      // 补零
      M = this.addZero(M);
      d = this.addZero(d);
      h = this.addZero(h);
      m = this.addZero(m);
      return this.dayTimer.push(y + "-" + M + "-" + d + " " + h + ":" + m);
    },
    // 补零
    addZero(n) {
      if (n < 10) {
        return (n = "0" + n);
      }
      return n;
    },
  },
  mounted() {
    let pro = axios.get("./data3.json");
    pro.then((res) => {
      // console.log(res.data.data[0]);
      this.userData = res.data.data;
      // console.log(this.userData.content);
      // console.log(this.userData[0].author.member.avatar_url);
      // console.log(this.userData[0].is_like);
      // console.log(this.userData[0]);
      // 获取时间
      let time = this.userData;
      for (let j = 0; j < time.length; j++) {
        // console.log(time[j].created_time);
        // 调用方法
        this.toData(time[j].created_time);
        // console.log(this.dayTimer);
      }
    });
  },
};
</script>

<style lang="scss" scoped>
.dy-discuss {
  margin-top: 100px;
  background: rgb(255, 255, 255);
  margin-bottom: 10px;
  // 清除浮动
  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }
  // 用户评论
  .discuss-user {
    // display: flex;
    width: 92%;
    margin: 0 auto;
    padding-top: 12px;
    .user-pic {
      float: left;
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
    }
    .user-content {
      float: left;
      width: 85%;
      margin-left: 7px;
      padding-bottom: 5px;
      border-bottom: 1px solid rgb(235, 235, 235);
      p {
        font-size: 16px;
        margin-bottom: 6px;
      }
      .cont-data {
        font-size: 12px;
        height: 16px;
        line-height: 16px;
        color: #ccc;
        margin-bottom: 12px;
        .data {
          color: #ccc;
        }
        .data-right {
          // display: inline-block;
          float: right;

          .num {
          }
          i {
            // font-size: 20px;
          }
        }
      }
      .cont-txt {
        p {
          font-size: 16px;
          letter-spacing: 1.2px;
          line-height: 1.5;
          // 多余的变成省略号
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
    }
  }
}
.notxt {
  width: 100%;
  text-align: center;
  margin: 30px auto 100px;
  font-size: 16px;
  color: rgb(147, 147, 147);
}
</style>